<template>
  <div class="power-box">
    <el-container>
      <el-header class="power-header power-header">
        <div class="power-div">
          <el-input v-model="input" placeholder="关键字" style="margin-right: 10px;"></el-input>
          <el-button type="primary" icon="el-icon-search" size="mini"
            >搜索</el-button
          >
        </div>

        <el-button type="primary" size="mini">+ 添加规格</el-button>
      </el-header>

      <el-main>
        <el-table :data="tableData" stripe style="width: 100%" border>
          <el-table-column prop="date" label="规格属性" width="180">
          </el-table-column>
          <el-table-column prop="address" label="规格归类"> </el-table-column>
          <el-table-column prop="address" label="操作选项"> </el-table-column>
          <el-table-column prop="address" label="权限角色">
            <template>
              <el-button size="mini" class="specBtn"> 修改 </el-button>
              <el-button :plain="true" @click="open2" size="mini" class="specBtn">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
        <el-footer>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="1"
            :page-size="5"
            @current-change="handleCurrentChange"
          >
          </el-pagination
        ></el-footer>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      total: 30,
      input: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    handleCurrentChange() {},
    open2() {
        this.$message({
          showClose: true,
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
      },
  },
};
</script>


<style lang="scss" scoped>
.el-pagination {
  display: flex;
  justify-content: center;
}
.power-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.power-div {
    display: flex;
    align-items: center;
}
.el-input__inner {
    height: 27.64px!important;
    width: 150px!important;
}
.el-input__inner::placeholder {
    font-size: 12px!important;
}
.specBtn {
    width: 56px;
    height: 28px;
}
</style>